<template>
 <div class="list" ref="wrapper">
    <div>
     <div class="area">
        <div class="title border-topbottom">您的位置</div>
        <div class="button-list">
            <div class="button">{{this.$store.state.city}}</div>
        </div>
     </div>
     <div class="area">
        <div class="title border-topbottom">热门城市</div>
        <div class="button-list">
            <div class="button-wrapper" v-for="item in hot" :key="item.id" @click="handleCityClick(item.name)">
            <div class="button">{{ item.name}}</div>
            </div>
       </div>
     </div>
     <div class="area" v-for="(item,key) in cities" :key="key" :ref="key">
        <div class="title border-topbottom">{{ key }}</div>
        <div class="item-list">
            <div class="item" v-for="innerItem in item" :key="innerItem.id"  @click="handleCityClick(innerItem.name)">{{ innerItem.name }}</div>
        </div>
     </div>
    </div>
 </div>
 
    
</template>

<script>
import Bscroll from 'better-scroll'
   export default{
     name:'CityList',
      props:{
         hot: Array,
         cities:Object,
         letter:String    
     },
     mounted() {
         this.scroll = new BScroll(this.$refs.wrapper)
         /*
         this.scroll =new BScroll(this.$refs.wrapper,{mouseWheel:true,click:true,tap:true});
         */
     },
     watch:{
      letter (){
          if (this.letter){
              const element = this.$refs[this.letter][0]
              this.scroll.scrollToElement(element)
          }
      }
     },
    
     methods:{
         handleCityClick (city){   
         this.$store.commit('changeCity',city)
          
         }
     }
   }


</script>

<style scoped>
.list{
    overflow: hidden;
    position: absolute; 
    left:0;
    right:0;
  
  
  
}
 .title{
     color:#666;
     background:#eee;
     line-height:30px;
     height:30px;
 }

 .button-list{
    
  width: 355px;
 
  font-size:16px;
  text-align: center;
  box-sizing: border-box; 
  overflow: hidden;
  margin-left:4px;

 }
 .button-wrapper{
     float: left;
     width:30%;
 }
  .button{
    border:1px solid #00bcd4;
    margin:10px 0 5px 10px;
    padding: 5px;
    text-align: center;
    width:80px;
    
 }
 .border-topbottom{
    padding: 3px;
    padding-left:10px;
    clear: both;
  
 }
 .item-list{
     line-height:32px;
     color:#666;
     padding-left:10px;
 }
 .item-list .item{
     border-bottom:1px solid #ccc;
 }
</style>